<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<body>
  <div id="root">
    <h3>你好,{{url}}</h3>
    <!-- 死数据 -->
    <a href="http://www.atguigu.com">前往尚硅谷学习1</a>

    <!-- 活数据：但是是把url当成一个链接，开辟了一个新的标签页 -->
    <a href="url">前往尚硅谷学习2</a>

    <!-- 活数据：但是是把{{url}}当成一个链接，开辟了一个新的标签页 -->
    <a href="{{url}}">前往尚硅谷学习3</a>
    <a href={{url}}>前往尚硅谷学习4</a>

    <!-- url当成表达式去执行. 属性和方法未被定义。 -->
    <a v-bind:href="url" x="hello">前往尚硅谷学习5</a>
    <!-- 渲染出来 v-bind可以给标签里的属性动态的绑定值-->
    <a :href="url.toUpperCase()" v-bind:y="hello">前往尚硅谷学习6</a>
    <a :href="Date.now()">时间戳链接,不加冒号就是字符串</a>
    <hr>
    <a :href="school.url">{{school.name}}一下</a>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    new Vue({
      el: '#root',
      data: {
        name: "Jack",
        url: 'http://www.atguigu.com',
        hello: '你好',
        school: { //key-value的嵌套
          name: '淘宝',
          url: 'http://www.taobao.com'
        }
      }
    })


  </script>
</body>

</html>